<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <span>本月: 社保在缴 公积金在缴</span>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="warning" size="small">导入excel</el-button>
          <el-button type="danger" size="small">导出excel</el-button>
          <el-button type="primary" size="small">新增员工</el-button>
        </template>
      </page-tools>
      <el-table
        :data="list"
        style="width: 100%"
        :default-sort="{prop: 'timeOfEntry', order: 'descending'}"
      >
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
        />
        <el-table-column
          label="姓名"
          prop="username"
        />
        <el-table-column
          label="工号"
          prop="workNumber"
        />
        <el-table-column
          label="聘用形式"
          prop="formOfEmployment"
        >
          <template slot-scope="scope">
            <!-- {{scope}}报错，定义方法在下面打印看scope结构 -->
            <!-- {{ scope.row.formOfEmployment===1?'正式':'非正式' }} -->
            {{ format(scope.row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column
          label="部门"
          prop="departmentName"
        />
        <el-table-column
          label="入职时间"
          prop="timeOfEntry"
          sortable
        />
        <el-table-column
          label="操作"
          width="280"
        >

          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
            >分配角色</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2, 3 , 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
// import pageTools from '@/components/pageTools'
// export default {
//   components: {
//     pageTools
//   }
// }
import { getEmployeesList } from '@/api/employees'
import employeeENUM from '@/constant/employees.js'
console.log(employeeENUM.hireType)
const map = employeeENUM.hireType.reduce((acc, cur) => {
  // console.log(acc, cur)
  acc[cur.id] = cur.value
  return acc
}, {})
console.log('map', map)
import { getRoles } from '@/api/settings.js'

export default {
  data() {
    return {
      list: [],
      indexMethod: 1,
      currentPage: 1,
      pageSize: 2,
      total: 0
    }
  },
  async created() {
    // this.fn()
    const res = await getEmployeesList(1, 10)
    console.log(res.data.rows)
    this.list = res.data.rows
  },
  methods: {

    format(id) {
      // const item = employeeENUM.hireType.find(item => item.id === id)
      // if (item) {
      //   return item.value
      // } else {
      //   return '未知'
      // }
      return map[id]
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
      this.loadRoles()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      console.log(val)
      this.currentPage = val
      this.loadRoles()
    },
    async loadRoles() {
      const res = await getRoles(this.currentPage, this.pageSize)
      // console.log(res.data.rows)
      this.roles = res.data.rows
      this.total = res.data.total
    }
  }
}
</script>
